import router from '@/router/index' // 引入路由实例
import store from '@/store/index' // 引入vuex store实例
import NProgress from 'nprogress'// 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

// 白名单  不用验证token  也可前往的路径
const whiteList = ['/login', '/404']

// 路由前置守卫
router.beforeEach(async(to, from, next) => {
  NProgress.start() // 开启进度条
  if (store.getters.token) {
    //   如果用户有token，并且要前往登录，直接让用户去首页即可，不用再去登录
    if (to.path === '/login') {
      next('/')
    } else {
      // 如果发现当前有 token 又不是进入登录页
      // 判断一下 vuex 里面有没有用户信息,
      // 判断用户id是否存在, 不用等到页面内部,直接在这里调用 vuex action 获取数据即可
      if (!store.getters.userId) {
        const { roles } = await store.dispatch('user/getUserInfo')
        console.log(roles, '用户的权限')

        const myAsyncRoutes = await store.dispatch('permission/filterRoutes', roles)

        router.addRoutes(myAsyncRoutes)
        // console.log(myAsyncRoutes, '用户可见的路由')
        // 如果是添加路由, 由于 vue-router 的缺陷
        // 需要在同一个地址在跳转一次才行
        next(to.path)
      } else {
        // 如果不是添加路由, 直接放行
        next()
      }
    }
    // 如果没有token，但要前往的地址是白名单
  } else if (whiteList.indexOf(to.path) > -1) {
    //   直接放行
    next()
  } else {
    //   否则跳转到登录页
    next('/login')
  }

  NProgress.done() // 手动强制关闭一次  为了解决 手动切换地址和刷新时  进度条的不关闭的问题
})

// 后置守卫
router.afterEach(() => {
  NProgress.done()// 关闭进度条
})
